<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>艾玛英语</title>
    <!-- ================== BASE CSS STYLE ================== -->
    <link rel="stylesheet" href="__PATH__/assets/css/base.css">
    <!-- ================== / BASE CSS STYLE ================== -->
    <!-- ================== PAGE CSS STYLE ================== -->
</head>

<body>
    <div id="main" class="training-camp">
        <section class="study-statistics">
            <span class="name">艾玛</span>
            <span>在艾玛英语100天训练营</span>
            <div class="pie-progress">
                <div class="item" id="day">
                    <div class="center">
                        <span>累计阅读天数</span>
                        <strong>10</strong>
                    </div>
                    <div class="pie">
                        <div class="pie-left"><div class="left"></div></div>
                        <div class="pie-right"><div class="right"></div></div>
                    </div>
                </div>
                <div class="item" id="book">
                    <div class="center">
                        <span>累计阅读绘本</span>
                        <strong>9</strong>
                    </div>
                    <div class="pie">
                        <div class="pie-left"><div class="left"></div></div>
                        <div class="pie-right"><div class="right"></div></div>
                    </div>
                </div>
                <div class="item" id="word">
                    <div class="center">
                        <span>累计学会单词</span>
                        <strong>100</strong>
                    </div>
                    <div class="pie">
                        <div class="pie-left"><div class="left"></div></div>
                        <div class="pie-right"><div class="right"></div></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="history">
            <div class="pic">
                <img src="__PATH__/assets/images/200x200/01.jpg" alt="">
            </div>
            <div class="info">
                <span>今天读了</span>
                <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, quidem.</strong>
                <hr>
                <span>新学单词12个</span>
                <em>感觉自己棒棒哒</em>
            </div>
        </section>
        <section class="follow">
            <p>
                长按二维码关注艾玛英语<br>
                每天20分钟<br>
                100小时搞定小学6年英语
            </p>
            <!-- 缺二维码图片 -->
            <img src="__PATH__/assets/images/200x200/01.jpg" alt="">
        </section>
    </div>


    <!-- ================== BASE JS ================== -->
    <script src="__PATH__/assets/js/jquery-1.9.1.min.js"></script>
    <script src="__PATH__/assets/js/common.js"></script>
    <!-- ================== / BASE JS ================== -->
    <!-- ================== PAGE LEVEL JS ================== -->
    <script>
    $(document).ready(function() {
        function changeProcess(id,value) {
            var num = value * 3.6;
            var _tgt = $('#'+ id +'');
            if(num < 180) {
                _tgt.find('.right').css('transform', 'rotate(' + num + 'deg)');
            } else {
                _tgt.find('.right').css('transform', 'rotate(180deg)');
                _tgt.find('.left').css('transform', 'rotate(' + (num-180) + 'deg)');
            }
        }
        //环形图百分比
        changeProcess('day',25);
        changeProcess('book',50);
        changeProcess('word',30);
    });
    </script>
    <!-- ================== / PAGE LEVEL JS ================== -->
</body>

</html>
